<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background: blue;
            border: 1px solid black
        }

        .box2 {
            width: 300px;
            height: 300px;
            border: 2px solid black
        }
    </style>
</head>
<body>
<div class="box1" draggable="true" id="source"></div>
<br>
<div class="box2" id="target"></div>

<script>
    let source = document.getElementById('source');
    let target = document.getElementById('target');
    source.ondragstart = function (event) {
        let e = event || window.event;
        console.log('开始拖拽');
        e.dataTransfer.setData('text', e.target.id);
    }
    target.ondragenter = function () {
        console.log('进入目标元素')
    }
    target.ondragover = function (event) {
        event = event || window.event;
        console.log('在目标元素中拖拽');
        event.preventDefault()
    }
    target.ondragleave = function () {
        console.log('拖放离开目标元素')
    }
    target.ondrop = function (event) {
        console.log('拖放');
        let e = event || window.event
        let data = e.dataTransfer.getData('text');
        e.target.appendChild(document.getElementById(data));
    }

</script>

</body>
</html>